<!DOCTYPE html>
<!--
/**
 * Copyright (c) 2006, Opera Software ASA
 * All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Opera Software ASA nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY OPERA SOFTWARE ASA AND CONTRIBUTORS ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL OPERA SOFTWARE ASA AND CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 -->
<html>
<head>
<title> </title>
<style type='text/css'>

html {
  height:100%;
  }

body {
  background-color:#333;
  margin:0;
  padding:0;
  font-family:'Lucida Sans Unicode';
  }

h1 {
  text-align:center;
  color:#ccc;
  font-size:40px;
  font-weight:normal;
  margin:0;
  padding:0;
  }
h2 {
  text-align:center;
  color:#f00;
  font-size:18px;
  font-weight:normal;
  xxfont-family:Arial;
  margin:20px 0 0 0;
  padding:0;
  }
h2:first-letter {
  font-size:60px;
  color:#f00;
  vertical-align:-13px;
  }
ul {
  margin:0;
  padding:0;
  width:30px;
  list-style:none;
  position:absolute;
  top:50%;
  left:50%;
  xxborder:1px solid red;
  }

li {
  position:absolute;
  width:30px;
  height:30px;
  color:red;
  cursor:pointer;
  }
.start {
  content:'click me!';
  width:240px;
  font-size:60px;
  line-height:80px;
  top:-40px;
  left:-120px;
  font-family:'Times New Roman', sans-serif;
  }



</style>

<script  type='text/javascript' src='../../animation.js' ></script>

<script type='text/javascript'>

var strategySpline=function(prop, current, animation)
{
  var round=Math.round;
  var style=animation.style;
  var temp=animation.path.slice(0), new_temp=[], length=0, i=0; 
  while(length=temp.length-2)
  {
    for(i=0, new_temp=[]; i<length; i++)
    {
      new_temp[i]=temp[i]+current/100*(temp[i+2]-temp[i]);
    }
    temp=new_temp;
  };
  style.left=round(temp[0])+'px';
  style.top=-round(temp[1])+'px';
  return 0;
}

var getRandomSign=function()
{
  return (Math.random()>.5?1:-1);
}

var getRandomPosition=function(amplitude)
{
  return getRandomSign()*Math.round(amplitude*Math.random());
} 

var getRandomSpeed=function()
{
  return .5+2*Math.random();
} 

var start=function()
{
  var pointer=null, i=0;
  for ( ; pointer=animations[i]; i++)
  {
    pointer.customStart(true);
  }
}

var checkOnstop=function()
{
  var pointer=null, i=0;
  for( ; pointer=animations[i]; i++)
  {
    if(pointer._isrunning) return;
  }
  var ul=document.getElementsByTagName('ul')[0];
  ul.innerHTML='';
  var li=ul.appendChild(document.createElement('li'));
  li.style.opacity='0';
  li.className='start';
  li.createAnimation(1, null, null, Animation.prototype.accelerate).addAnimation('opacity', '0', '1').run();
}

var angleToRGB=function ( a ) 
{
  while(a>360) a-=360;
  while(a<0) a+=360;
	var rest = a % 60;
	a -= rest;	
	rest = Math.floor( 255/60*rest );
	if ( a == 360 ) a=0;
	if( a >= 0  && a < 60 ) return 'rgb('+ 255 +','+ rest +','+ 0 +')';
	if( a >= 60 && a < 120 ) return 'rgb('+ (255-rest) +','+ 255 +','+ 0 +')';
	if( a >= 120 && a < 180 ) return 'rgb('+ 0 +','+ 255 +','+ rest +')';
	if( a >= 180 && a < 240 ) return 'rgb('+ 0 +','+ (255-rest) +','+ 255 +')';
	if( a >= 240 && a < 300 ) return 'rgb('+ rest +','+ 0 +','+ 255 +')';
	if( a >= 300 && a < 360 ) return 'rgb('+ 255 +','+ 0 +','+ (255-rest) +')';
}

var randomColor=function()
{
  return angleToRGB(Math.round(randomColor.start+randomColor.range*Math.random()));
}
randomColor.start=30;
randomColor.range=240;

var animations=[];

var content=
[
  '\u25A0', '\u25A1', '\u25A3', '\u25AC', '\u25AE', 
  '\u25B2', '\u25B3', '\u25C6', '\u25C7', '\u25C8', 
  '\u25C9', '\u25CB', '\u25CE', '\u25CF', '\u25EC' 
];

var clickHandler=function(event)
{      
  var ele=event.target;
  if(ele.nodeName.toLowerCase()=='li')
  {
    ele=ele.parentNode;
    ele.innerHTML='';
    animations=[];
    randomColor.start=Math.floor(Math.random()*360);
    randomColor.range=60+Math.floor(Math.random()*180);
    var number=15+Math.round(Math.random()*35), li=null, animation=null, i=0;
    for( ; i<number; i++)
    {
      li=ele.appendChild(document.createElement('li'));
      li.appendChild(document.createTextNode(content[Math.floor(Math.random()*15)]));
      li.style.fontSize=(10+Math.floor(Math.random()*20))+'px';
      animation=animations[animations.length]=li.createAnimation();
      animation.restartCounter=0;
      animation.addAnimation('spline', '','', strategySpline);
      animation.onfinish=function(){this.customStart()};
      animation.onstop=checkOnstop;
      animation.customStart=function(bol)
      {
        var oldPath=this.path;
        if(bol)
        {
          this.speed=getRandomSpeed();
          this.amplitude=window.innerWidth*.5;
          this.restartCounter=0;
          this.element.style.color=randomColor();
        }
        this.amplitude=this.amplitude*Math.exp(-(this.restartCounter++)/40);
        if(this.amplitude<5)
        {
          this.stop();
        }
        else
        {
          this.path=
          [
            0, 0, 
            oldPath?-1*oldPath[6]:getRandomPosition(this.amplitude), oldPath?-1*oldPath[7]:getRandomPosition(this.amplitude),
            getRandomPosition(this.amplitude),getRandomPosition(this.amplitude),
            getRandomPosition(this.amplitude),getRandomPosition(this.amplitude),
            0, 0
          ];
          this.run();
        }
      };
    }
    start();
  }
}

onload=function()
{
  document.getElementsByTagName('ul')[0].addEventListener('click', clickHandler, false);
  checkOnstop();
}

</script>
</head>

<body>
<h2>Opera animations</h2>
<h1>custom strategies::splines</h1>
<ul></ul>

 <p style="position: absolute; bottom: 1em; left: 1em; border: 1px dotted red; background: infobackground; z-index: -1; padding: .4em;">
  This demo is made with the <a href="../../animation.js">Opera animation library</a>.
 </p>

</body>
</html>
